<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体练习</title>
    <link rel="stylesheet" href="./css/dd.css">
</head>

<body>
    <!-- 版心 -->
    <div class="w">
        <div class="header">
            <div class="logo">
                <img src="./img/logo.png" alt="">
            </div>
            <!-- 头部导航栏 -->
            <div class="header-nav">
                <a href="#">电影</a>
                <a href="#">星闻</a>
                <a href="#">独家</a>
                <a href="#">更多</a>
            </div>
        </div>
        <!-- 左边栏 -->
        <aside>
            <!-- 标题 -->
            <div class="title">
                <h1>韩寒《飞驰人生》首爆预告 沈腾赛车扛上飞机</h1>
            </div>
            <!-- 时间 -->
            <p class="time">时间：2018.10.04 来源：1905电影网</p>
            <!-- 视频 -->
            <video src="media/1.mp4" controls="controls"></video>
        </aside>
        <!-- 右边栏 -->
        <article>
            <a href="#" class="pic1">
                <img src="./img/1.jpg" alt="">
            </a>
            <p class="film">相关电影</p>
            <div class="feichi">
                <a href="#" class="pic2">
                    <img src="./img/2.jpg" alt="">
                </a>
                <div class="msg">
                    <span>飞驰人生</span>
                    <p>导演：韩寒</p>
                    <p>主演：沈腾 等</p>
                </div>
            </div>
        </article>
    </div>
</body>

</html>